<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		#div1{
/* 			margin: auto;
			margin-top: ;
			width: 500px;
			height: 500px;
			background-color: aqua; */
			width:500px;
			height:500px;
			border:2px solid #000;
			position:relative;
			margin: auto;
			margin-top: 100px;
		}
		#div2{
/* 			width: 400px;
			height: 400px;
			background-color: royalblue;
			margin: auto;
			margin-top: auto; */
			width:400px;
			height:400px;
			margin: auto; 
			position: absolute; 
			top: 0; left: 0; bottom: 0; right: 0;
			background-color: red;
		}
		#div3{
			width:300px;
			height:300px;
			margin: auto; 
			position: absolute; 
			top: 0; left: 0; bottom: 0; right: 0;
			background-color: orange;
		}
		#div4{
			width:200px;
			height:200px;
			margin: auto; 
			position: absolute; 
			top: 0; left: 0; bottom: 0; right: 0;
			background-color: aqua;
		}
		</style>
	</head>
	<body>
		<div  id="div1" >
			div1
			<div  id="div2">
				<p>div2</p>
				<div id="div3">
					<a href="">div3</a>
					<div id="div4">
					<img src="" >div4
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var div4 = document.getElementById('div4')
		var div3 = document.getElementById('div3')
		var div2 = document.getElementById('div2')
		var div1 = document.getElementById('div1')
		console.log(div4.parentElement)
		console.log(div3.parentElement)
		console.log(div2.parentElement)
		console.log(div1.parentElement)
		console.log(div4.parentNode)
		console.log(div3.parentNode)
		console.log(div2.parentNode)
		console.log(div1.parentNode)
		console.log(div4.children)
		console.log(div3.children)
		console.log(div2.children)
		console.log(div1.children)
		console.log(div4.childNodes)
		console.log(div3.childNodes)
		console.log(div2.childNodes)
		console.log(div1.childNodes)
		
	</script>

</html>